<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8" />
<title>SpiderManager</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/common.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/tool.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<style>
.panel-group {
	max-height: 770px;
	overflow: auto;
}

.leftMenu .active {
	background: white !important;
	text-shadow: none !important;
}

.leftMenu .list-group-item {
	border: none;
}

.leftMenu {
	margin: 10px;
	margin-top: 5px;
}

.leftMenu .panel-heading {
	font-size: 14px;
	padding-left: 20px;
	height: 36px;
	line-height: 36px;
	color: white;
	position: relative;
	cursor: pointer;
} /*转成手形图标*/
.leftMenu .panel-heading span {
	position: absolute;
	right: 10px;
	top: 12px;
}

.leftMenu .menu-item-left {
	padding: 2px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	display: block;
	text-decoration: none;
	cursor: pointer;
}

.leftMenu .menu-item-left:hover {
	background: #C4E3F3;
	border: 1px solid #1E90FF;
}
</style>
</head>
<body>
	<div class="container-fluid">
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
						aria-expanded="false">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">Spider Stack</a>
				</div>
			</div>
			<!-- /.container-fluid -->
		</nav>
		<div class="row" style="margin-top:80px">
			<div class="col-md-2">
				<div class="panel-group table-responsive" role="tablist">
					<div class="panel panel-primary leftMenu">
						<div item="tab" data-toggle="collapse" data-target="#list1"
							role="presentation" class="panel-heading">
							<h4 class="panel-title">注册中心</h4>
							<span class="glyphicon glyphicon-triangle-right right"></span>
						</div>
						<div id="list1" class="panel-collapse collapse in" role="tabpanel"
							aria-labelledby="list1">
							<ul class="list-group">
								<li class="list-group-item">
									<!-- 利用data-target指定URL --> <a href="#theme_panel"
									aria-controls="theme_panel" data-toggle="tab"
									class="menu-item-left" role="tab"> <span
										class="glyphicon glyphicon-pencil"></span> 主题管理
								</a>
								</li>

								<li role="presentation" class="list-group-item"><a
									href="#index_panel" aria-controls="index_panel"
									class="menu-item-left" data-toggle="tab"> <span
										class="glyphicon glyphicon-repeat"></span> 启动实例
								</a></li>

								<li role="presentation" class="list-group-item"><a
									class="menu-item-left" data-target="#index_panel"> <span
										class="glyphicon glyphicon-modal-window"></span> 控制台
								</a></li>

								<li role="presentation" class="list-group-item"><a
									class="menu-item-left" data-target="#index_panel"> <span
										class="glyphicon glyphicon-time"></span> 日志管理
								</a></li>

							</ul>
						</div>
					</div>
					<div class="panel panel-primary leftMenu">
						<div item="tab" data-toggle="collapse" data-target="#list2"
							role="presentation" class="panel-heading">
							<h4 class="panel-title">配置</h4>
							<span class="glyphicon glyphicon-triangle-right right"></span>
						</div>
						<div id="list2" class="panel-collapse collapse " role="tabpanel"
							aria-labelledby="list1">
							<ul class="list-group">
								<li role="presentation" class="list-group-item">
									<!-- 利用data-target指定URL --> <a class="menu-item-left"
									data-target=""> <span class="glyphicon glyphicon-list-alt"></span>
										服务器配置
								</a>
								</li>

								<li role="presentation" class="list-group-item"><a
									class="menu-item-left" data-target="#"> <span
										class="glyphicon glyphicon-chevron-right"></span> 队列配置
								</a></li>

							</ul>
						</div>
					</div>

					<div class="panel panel-primary leftMenu">
						<div item="tab" data-toggle="collapse" data-target="#list3"
							class="panel-heading">
							<h4 class="panel-title">Spider</h4>
							<span class="glyphicon glyphicon-triangle-right right"></span>
						</div>
						<div id="list3" class="panel-collapse collapse " role="tabpanel"
							aria-labelledby="list1">
							<ul class="list-group">
								<li role="presentation" class="list-group-item">
									<!-- 利用data-target指定URL --> <a href="#spider_panel"
									class="menu-item-left" aria-controls="spider_panel"
									data-toggle="tab" role="tab"> <span
										class="glyphicon glyphicon-eye-open"></span> 爬虫监控
								</a>
								</li>

								<li role="presentation" class="list-group-item"><a
									class="menu-item-left" data-target="test2.html"> <span
										class="glyphicon glyphicon-equalizer"></span> 数据统计
								</a></li>

								<li role="presentation" class="list-group-item"><a
									class="menu-item-left" data-target="test2.html"> <span
										class="glyphicon glyphicon-transfer"></span> 修改绑定
								</a></li>

							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-10 tab-content">
				<div role="panel" id="theme_panel"
					class="tab-pane container-fluid active">
					<div class="row">
						<div class="col-md-6">
							<div class="" style="margin-bottom:10px">
								<ol class="breadcrumb">
									<li><a href="#">SpiderStack</a></li>
									<li class="active">云爬虫主题</li>
								</ol>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-inline" style="margin-bottom:10px">
								<!-- /.modal -->
								<div class="form-group">
									<div class="input-group btn-tab">
										<input type="text" class="form-control" placeholder="筛选" /> <span
											class="input-group-btn">
											<button class="btn btn-default" type="button">筛选</button>
										</span>
									</div>
									<!-- /input-group -->

									<button class="btn btn-danger btn-tab">创建主题</button>
									<button class="btn btn-default" data-toggle="modal"
										data-target="#myModal">注入目标</button>
								</div>
								<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
									aria-labelledby="myModalLabel">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
													aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												<h4 class="modal-title">添加目标网址</h4>
											</div>
											<div class="modal-body">
												<p>您可以在这里添加想要爬取的目标网址&hellip;</p>
												<div class="form-group row">
													<div class="col-sm-4">
														<select name="topic" class="form-control">
															<option>请选择主题</option>
														</select>
													</div>
													<div class="col-sm-8">
														<input type="text" class="form-control"
															id="recipient-name" placeholder="http..." />
													</div>
												</div>
											</div>
											<div class="modal-footer">
												<button type="button" onclick="addUrl()"
													class="btn btn-primary" data-dismiss="modal">添加</button>
											</div>
										</div>
										<!-- /.modal-content -->
									</div>
									<!-- /.modal-dialog -->
								</div>
							</div>
						</div>
					</div>
					<div class="table-responsive">
						<table class="table table-striped ps-table">
							<thead>
								<th><input type="checkbox" item="manager" /></th>
								<th>主题名称</th>
								<th>爬虫镜像</th>
								<th>规模大小</th>
								<th>目标集</th>
								<th>任务</th>
								<th>生命时长</th>
								<th>存储方式</th>
								<th>状态</th>
								<th>操作</th>
							</thead>
							<tbody id="urls">
							</tbody>
						</table>
						<div class="col-md-9"></div>
						<div class="col-md-3">
							<nav aria-label="Page navigation">
								<ul class="pagination">
									<li><a href="#" aria-label="Previous"> <span
											aria-hidden="true">&laquo;</span>
									</a></li>
									<li><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li><a href="#" aria-label="Next"> <span
											aria-hidden="true">&raquo;</span>
									</a></li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
				<div id="index_panel" role="panel"
					class="tab-pane fade container-fluid">
					<div class="row">
						<div class="col-md-9">
							<div class="" style="margin-bottom:10px">
								<ol class="breadcrumb">
									<li><a href="#">SpiderStack</a></li>
									<li class="active">注册中心</li>
								</ol>
							</div>
						</div>
						<div class="col-md-3">
							<div class="input-group" style="margin-bottom:10px">
								<button class="btn btn-default btn-tab" onclick="">新建实例</button>
								<button class="btn btn-danger">关闭实例</button>
							</div>
						</div>
					</div>
					<div class="table-responsive">
						<table class="table table-striped">
							<thead>
								<th><input type="checkbox" item="manager" /></th>
								<th>编号</th>
								<th>来源ip</th>
								<th>爬虫主题</th>
								<th>正则表达</th>
								<th>爬虫数量</th>
								<th>操作</th>
							</thead>
							<tbody id="managers">
							</tbody>
						</table>
					</div>
				</div>
				<div id="spider_panel" role="panel"
					class="tab-pane fade container-fluid">
					<div class="row">
						<div class="col-md-9">
							<div class="" style="margin-bottom:10px">
								<ol class="breadcrumb">
									<li><a href="#">SpiderStack</a></li>
									<li class="active">爬虫管理</li>
								</ol>
							</div>
						</div>
						<div class="col-md-3">
							<div class="input-group" style="margin-bottom:10px">
								<button class="btn btn-default btn-tab" onclick="ViewDrop()">开启爬虫</button>
								<button class="btn btn-danger">关闭爬虫</button>
							</div>
						</div>
					</div>
					<div class="table-responsive">
						<table class="table table-striped">
							<thead>
								<th><input type="checkbox" item="manager" /></th>
								<th>编号</th>
								<th>爬虫名</th>
								<th>爬虫主题</th>
								<th>正则表达</th>
								<th>爬虫状态</th>
								<th>优先级</th>
								<th>目标网站</th>
								<th>操作次数</th>
								<th>操作</th>
							</thead>
							<tbody id="spiders">
							</tbody>
						</table>
					</div>
				</div>

			</div>
		</div>
	</div>
</body>
</html>